<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in imgs" :key="item.bannerid">
      <!-- <router-link :to="item.link"> <img class="swiper_img" :src="item.img" /></router-link> -->
      <a :href="item.link"> <img class="swiper_img" :src="item.img" :alt="item.alt" /></a>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        // {
        //   img: "https://w.wallhaven.cc/full/o5/wallhaven-o5xex7.png",
        //   alt: "img",
        //   link: "https://w.wallhaven.cc/full/o5/wallhaven-o5xex7.png",
        //   bannerid: "banner_af2d8615-bc59-4247-88cb-22e88598f74b",
        //   flag: true,
        // },
        // {
        //   img: "https://w.wallhaven.cc/full/9d/wallhaven-9dm55k.jpg",
        //   alt: "img",
        //   link: "https://w.wallhaven.cc/full/9d/wallhaven-9dm55k.jpg",
        //   bannerid: "banner_0060ab9c-3ad7-4396-b760-c8a91df768c3",
        //   flag: true,
        // },
      ],
    };
  },

  created() {
    this.$http.get("/banner/list").then((res) => {
      if (res.data.code === "200") {
        this.imgs = res.data.data.filter((item) => item.flag);
      }
    });
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  width: 100%;
  height: 12.5rem;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.swiper_img {
  width: 100%;
  height: 100%;
}
</style>